<template>
  <view class="login-container">
    <!-- 标题 -->
    <view class="title"></view>

    <!-- 切换栏 -->
    <view class="tab-bar">
      <view
        v-for="item in tabs"
        :key="item.type"
        class="tab-item"
        :class="{ active: activeTab === item.type }"
        @click="switchTab(item.type)"
      >
        {{ item.label }}
        <view v-if="activeTab === item.type" class="tab-line"></view>
      </view>
    </view>

    <!-- 手机号登录表单 -->
    <view v-if="activeTab === 'phone'" class="form-box">
      <view class="input-group">
        <text class="iconfont icon-phone"></text>
        <input v-model="phone" type="number" placeholder="请输入手机号" class="input" />
      </view>

      <view class="input-group">
        <!-- <text class="iconfont icon-lock"></text> -->
        <uni-icons class="iconfont" color="#999" type="locked" size="22"></uni-icons>

        <input v-model="smsCode" type="number" placeholder="请输入验证码" class="input" />
        <button class="sms-btn" :disabled="isCounting" @click="getSmsCode">
          {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
        </button>
      </view>
    </view>

    <!-- 账号登录表单 -->
    <view v-else class="form-box">
      <view class="input-group">
        <text class="iconfont icon-user"></text>
        <input v-model="username" type="text" placeholder="请输入账号" class="input" />
      </view>

      <view class="input-group">
        <uni-icons class="iconfont" type="locked" size="22" color="#999"></uni-icons>
        <input
          v-model="password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入密码"
          class="input"
        />

        <!-- 眼睛图标 -->
        <uni-icons
          :type="showPassword ? 'eye' : 'eye-slash'"
          size="22"
          color="#999"
          @click="togglePassword"
          class="iconfonts eye-icon"
        ></uni-icons>
        <!-- <text 
          class="iconfont icon-eye" 
          :class="{ active: showPassword }"
          @click="showPassword = !showPassword"
        ></text> -->
        <!-- <uni-icons class="iconfont" color="#999" type="eye" size="20"></uni-icons> -->
      </view>
    </view>

    <!-- 登录按钮 -->
    <button class="login-btn" @click="handleLogin">
      {{ activeTab === 'phone' ? '立即登录' : '账号登录' }}
    </button>
    <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores'

import axios from 'axios'
const tabs = [
  { type: 'phone', label: '手机登录' },
  { type: 'account', label: '账号登录' },
]

const activeTab = ref('phone')
const phone = ref('')
const smsCode = ref('')
const username = ref('')
const password = ref('')
const showPassword = ref(false)
const isCounting = ref(false)
const countdown = ref(0)
// 错误提示信息
const errorMessage = ref('')
// 切换密码可见性
const togglePassword = () => {
  showPassword.value = !showPassword.value
}
// 切换登录方式
const switchTab = (type) => {
  activeTab.value = type
}
const rid = ref('')
// 获取验证码
const getSmsCode = () => {
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  yzmLogin()
  isCounting.value = true
  countdown.value = 60
  const timer = setInterval(() => {
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCounting.value = false
      return
    }
    countdown.value--
  }, 1000)
}

// 处理登录
const handleLogin = () => {
  if (activeTab.value === 'phone') {
    if (!phone.value || !smsCode.value) {
      uni.showToast({ title: '请填写完整信息', icon: 'none' })
    }else{
      phoneLogin()
    }
  } else {
    if (!username.value || !password.value) {
      uni.showToast({ title: '请填写账号密码', icon: 'none' })
    } else {
      Login()
    }
  }
}
// 登录逻辑
const Login = async () => {
  // 模拟登录请求
  uni.showLoading({
    title: '登录中...',
  })
  const res = await axios.post('http://124.70.51.78:8082/oauth/login', {
  // const res = await axios.post('http://192.168.31.184:8082/oauth/login', {
    username: username.value,
    password: password.value,
  })
  // loginSuccess(res)
  console.log(res, 'res')

  setTimeout(() => {
    uni.hideLoading()
    if (res.data.code == 200) {
      // 保存会员信息
      const memberStore = useMemberStore()
      memberStore.setProfile(res.data.data)
      console.log(memberStore, 'memberStore')

      uni.showToast({
        title: '登录成功',
        icon: 'success',
      })
      // 跳转到首页
      uni.navigateTo({
        url: '/pages/device/device',
      })
    } else {
      errorMessage.value = '用户名或密码错误'
    }
  }, 1000)
}

// 验证码登录
const yzmLogin = async () => {
    const res = await axios.get('http://124.70.51.78:8082/oauth/getVerificationCode/' + phone.value)
  // const res = await axios.get('http://192.168.31.184:8082/oauth/getVerificationCode/' + phone.value)
  if (res.data.code == 200) {
    rid.value = res.data.data
  }
}

// 手机号登录
const phoneLogin = async () => {
  // 模拟登录请求
  uni.showLoading({
    title: '登录中...',
  })
    const res = await axios.get('http://124.70.51.78:8082/oauth/LoginWithPhoneNumber/'+rid.value+'/'+smsCode.value+'/'+ phone.value)
  // const res = await axios.get('http://192.168.31.184:8082/oauth/LoginWithPhoneNumber/'+rid.value+'/'+smsCode.value+'/'+ phone.value)
  // loginSuccess(res)
  console.log(res, 'res')

  setTimeout(() => {
    uni.hideLoading()
    if (res.data.code == 200) {
      // 保存会员信息
      const memberStore = useMemberStore()
      memberStore.setProfile(res.data.data)
      console.log(memberStore, 'memberStore')

      uni.showToast({
        title: '登录成功',
        icon: 'success',
      })
      // 跳转到首页
      uni.navigateTo({
        url: '/pages/device/device',
      })
    } else {
      errorMessage.value = res.msg
    }
  }, 1000)
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;
  height: calc(100vh - 44px);
  background: linear-gradient(135deg, #4e6bb9 0%, #4169e1 100%);
}

.title {
  width: 100vw;
  height: 30vh;
  background: url('../../static/images/bg.png');
  background-size: cover; /* 覆盖整个容器（可能裁剪图片） */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 禁止重复平铺 */
}

.tab-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 80rpx;
  position: relative;

  .tab-item {
    padding: 20rpx 60rpx;
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    transition: all 0.3s;

    &.active {
      color: #fff;
      font-weight: 500;
    }

    .tab-line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 6rpx;
      background: #fff;
      border-radius: 3rpx;
      animation: lineMove 0.3s;
    }
  }
}

@keyframes lineMove {
  from {
    width: 0;
  }
  to {
    width: 80rpx;
  }
}

.form-box {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;

  .iconfont {
    position: absolute;
    left: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 40rpx;
  }
  .iconfonts {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 40rpx;
  }
  .input {
    height: 100rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 0 80rpx;
    font-size: 28rpx;
    border: 2rpx solid #eee;
    transition: border-color 0.3s;

    &:focus {
      border-color: #764ba2;
    }
  }

  .sms-btn {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
    background: #4e6bb9;
    color: #fff;
    border-radius: 30rpx;
    font-size: 24rpx;

    &[disabled] {
      background: #ccc;
    }
  }

  .eye-icon {
    // right: 20rpx;
    // left: auto;
    // color: #999;
    // font-size: 36rpx;
    .eye-icon {
      margin-left: 20rpx;
      cursor: pointer;
    }
    &.active {
      color: #4e6bb9;
    }
  }
}

.login-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(90deg, #4e6bb9, #667eea);
  color: #fff;
  font-size: 32rpx;
  border-radius: 50rpx;
  margin-top: 60rpx;
  transition: transform 0.2s;

  &:active {
    transform: scale(0.98);
  }
}

.other-login {
  margin-top: 80rpx;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);

  .icons {
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    gap: 60rpx;

    .iconfont {
      font-size: 60rpx;
      padding: 20rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      width: 100rpx;
      height: 100rpx;
      line-height: 100rpx;
    }
  }
}
</style>
